<template>
  <div class="menu" id="menu" v-if="showModal">
    <div class="btn-close" @click="handleHideModal">
      <img src="../../images/close.png" alt="">
    </div>
    <ul class="menu_list">
      <li v-for="(item, index) in menuList" :key="index">
        <ul v-if="item.children && item.children.length">
          <li @click="handleShowChild(item.id, item.show)">
            <div>
              {{langOther == 'zh' ? item.title : item.title_en}}
            </div>
            <ul class="child_list" v-if="item.show">
              <li v-for="(child, i) in item.children" :key="i" @click.stop="handleNavigate(child.link)">
                <div style="font-size: .25rem;" v-if="langOther == 'zh' && child.title">
                  <span class="arrow-right"></span>
                  {{child.title}}
                </div>
                <div style="font-size: .25rem;" v-else-if="langOther == 'en' && child.title_en">
                  <span class="arrow-right"></span>
                  {{child.title_en}}
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <ul v-else>
          <li @click="handleNavigate(item.link)">{{langOther == 'zh' ? item.title : item.title_en}}</li>
        </ul>
      </li>
    </ul>
    <div class="toggle" @click="handleShowLang">
      <div>选择语言 ({{lan}})</div>
      <ul class="" v-if="showLang" style="font-size: .25rem;">
        <li @click.stop="changeLang('zh')" style="margin-top: .3rem;">
          <div style="font-size: .25rem;">
            <span class="arrow-right"></span>
            简体中文
          </div>
        </li>
        <li @click.stop="changeLang('en')" style="margin-top: .3rem;">
          <div style="font-size: .25rem;">
            <span class="arrow-right"></span>
            English
          </div>
        </li>
      </ul>
      <!--<div style="margin-left: .2rem;"> > </div>-->
    </div>
    <div class="qx_ercode">
      <p><img src="../../images/ercode.png" alt=""></p>
      <p>{{$i18n.messages[langOther] && $i18n.messages[langOther].followUs ? $i18n.messages[langOther].followUs : ''}}</p>
    </div>
  </div>
</template>
<script>
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js")
  export default {
    data() {
      return {
        menuList: [],
        lan: "",
        langOther: "",
        showLang: false,
      }
    },
    props: {
      showModal: {
        type: Boolean,
        default: false
      }
    },
    components: {

    },
    mounted() {
        this.langOther = this.$i18n.locale
        this.lan = this.langOther == 'zh' ? "中文" : (this.langOther == 'en' ? 'English' : '')
      this.getMenu()
        let that = this
        document.addEventListener("touchstart", (e) => {
            if (that.showModal) {
                if (!this.$el.contains(e.target)) {
                    this.handleHideModal()
                    return;
                }
            }
        })
    },
    methods: {
      getMenu() {
        let url = CONSTANT.URL.getMenu;
        common.requestGetAjax(url, {}, {type: 'h5'}, (res) => {
          if (res.code == 200) {
            res.data.map( (item, index) => {
                res.data[index] = Object.assign(res.data[index], {show: false})
            })
            this.menuList = res.data
            this.$emit("getMenuList", this.menuList)
          }
        })
      },
      handleShowChild(id, show) {
        this.menuList.map( (item, index) => {
          if (item.id == id) {
            this.menuList[index].show = !show
          }
        })
      },
      handleHideModal() {
        this.$emit("handleHideModal", false)
      },
      handleNavigate(link) {
        this.$emit("handleHideModal", false)
          if (link.split("#")[1]) {
            localStorage.setItem("id", '#'+link.split("#")[1])
          } else {
              localStorage.setItem("id", '')
          }
        this.$router.push(link)

        if (localStorage.getItem("id")) {
            document.querySelector(localStorage.getItem("id")).scrollIntoView()
        }
      },
        changeLang(lan) {

            this.showLang = false
            this.$i18n.locale = lan
            this.langOther = lan
//            common.setCookie("LANG", lan)
            this.$emit("handleChangeLan")
            if (lan == 'zh') {
              this.lan = "中文"
            } else if (lan == 'en') {
                this.lan = "English"
                if (location.href.indexOf("news") != -1 || location.href.indexOf("join") != -1) {
                    this.$router.replace("/")
                }
            }
        },
        handleShowLang() {
            if (this.showLang) {
                this.showLang = false
            } else {
                this.showLang = true
            }
        }
    }
  };
</script>
<style lang="less">
  @keyframes showModal {
    0% {
      transform: translateX(3.66rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  .menu {
    position: fixed;
    height: 100%;
    background-color: #1a5fab;
    top: 0;
    right: 0;
    z-index: 9;
    opacity: .94;
    animation: showModal .3s;
    .toggle {
      color: #fff;
      padding-left: .93rem;
      /*position: absolute;*/
      /*left: 50%;*/
      /*top: .4rem;*/
      /*transform: translateX(-50%);*/
      font-size: .3rem;
      ul {
        li {
          .arrow-right {
            position: relative;
            &:after {
              content: "";
              width: .08rem;
              height: .08rem;
              border: 1px solid #fff;
              transform: rotate(45deg);
              border-bottom: 0;
              border-left: 0;
              display: inline-block;
              vertical-align: middle;
              margin-right: .1rem;
            }
          }
        }
      }
    }
    .btn-close {
      position: absolute;
      width: .88rem;
      height: .88rem;
      background-color: #32AEA9;
      line-height: .88rem;
      text-align: center;
      left: -.88rem;
      img {
        width: .35rem;
        vertical-align: middle;
      }
    }
    .menu_list {
      width: 3.66rem;
      color: #fff;
      padding-top: 1.24rem;
      font-size: .31rem;
      li {
        .arrow-right {
          position: relative;
          &:after {
            content: "";
            width: .08rem;
            height: .08rem;
            border: 1px solid #fff;
            transform: rotate(45deg);
            border-bottom: 0;
            border-left: 0;
            display: inline-block;
            vertical-align: middle;
            margin-right: .1rem;
          }
        }
        .arrow-bottom {
          position: relative;
          &:after {
            content: "";
            width: .08rem;
            height: .08rem;
            border: 1px solid #fff;
            transform: rotate(-45deg);
            border-top: 0;
            border-right: 0;
            display: inline-block;
            vertical-align: middle;
            margin-right: .1rem;
          }
        }
      }
      .child_list {
        li {
          /*margin-left: .3rem;*/
          margin-top: .3rem;
        }
      }
    }
    .menu_list > li {
      margin-bottom: .6rem;
      padding-left: .93rem;
    }
    .qx_ercode {
      text-align: center;
      margin-top: 1.31rem;
      p {
        &:first-child {
          img {
            width: 1.79rem;
          }
        }
        &:last-child {
          margin-top: .24rem;
          font-size: .25rem;
          color: #fff;
        }
      }
    }
  }
</style>
